import React, { useState, useEffect } from 'react';
import { Button, message } from 'antd';
import useDictionary from '@/hooks/useDictionary';
import { useRequest } from '@/hooks';
import { sendVerificationCode } from '@/pages/EntryManage/services';

// 邮箱发送结果页
const SendMailResult = ({ email, redirectId }) => {
    const [domain, setDomain] = useState();
    const [disabled, setDisabled] = useState(false);
    const [mailDomainList] = useDictionary('gotoMailbox', {
        useCache: false,
        isAuth: false
    });

    // 发送验证码
    const { loading, run } = useRequest(params => sendVerificationCode(params), {
        manual: true
    });

    useEffect(() => {
        if (email) {
            const arr = email.split('@');
            if (arr.length > 0) {
                const currentArr = mailDomainList?.filter(item => item?.text === `@${arr[1]}`);
                if (currentArr?.length > 0) {
                    setDomain(currentArr[0]?.value);
                }
            }
        }
    }, [email, mailDomainList]);

    return (
        <>
            <ul
                style={{
                    marginTop: '-22px',
                    fontSize: 16,
                    color: 'rgba(0, 0, 0, 0.65)',
                    marginBottom: 45
                }}
            >
                <li>我们已向您的账号邮箱</li>
                <li>{email}</li>
                <li>发送了一封重置密码的邮件，15分钟有效</li>
            </ul>
            {domain && (
                <div style={{ marginBottom: 16 }}>
                    <Button block size="large" type="primary" href={domain} target="_blank">
                        前往邮箱
                    </Button>
                </div>
            )}

            <div style={{ fontSize: 12, color: 'rgba(0,0,0,0.45)' }}>
                没有收到？
                <Button
                    type="link"
                    style={{ margin: 0, padding: 0 }}
                    loading={loading}
                    disabled={disabled}
                    onClick={async () => {
                        setDisabled(true);
                        const { code, msg } =
                            (await run({
                                loginName: email,
                                organizeType: 1,
                                type: 10,
                                redirectId
                            })) || {};
                        if (code === 10000) {
                            message.success('邮件发送成功');
                        } else {
                            message.error(msg);
                        }
                        setDisabled(false);
                    }}
                >
                    重新发送
                </Button>
            </div>
        </>
    );
};

export default SendMailResult;
